<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整屏切换效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        div {
            width: 100vw;
            height: 100vh;
            text-align: center;
            font-size: 100px;
        }

        #box {
            overflow: hidden;
        }

        #box>div {
            transition: 0.5s;
        }

        .one {
            background-color: lightgreen;
        }

        .two {
            background-color: lightpink;
        }

        .three {
            background-color: lightskyblue;
        }

        .four {
            background-color: lightseagreen;
        }

        .five {
            background-color: lightsalmon;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <div class="four">four</div>
        <div class="five">five</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //鼠标滚轮事件

        if (window.onmousewheel === undefined) {
            //当前浏览器是火狐
            //兼容火狐浏览器
            window.addEventListener('DOMMouseScroll', function (e) {
                //调用移动方法
                move(e.detail > 0)
            })
        } else {
            //当前浏览器是chrome
            //兼容chrome浏览器
            window.onmousewheel = function (e) {
                //调用移动方法
                move(e.wheelDelta < 0)
            }
        }

        let date = null   //操作需要节流
        let i = 0
        //整频移动方法
        function move(isdown) {
            if (new Date - date > 500) {
                if (isdown) {
                    //鼠标向下滚动，屏幕向上移动
                    i++
                    if (i > 4) {
                        i = 4
                        return
                    }
                } else {
                    //鼠标向上滚动，屏幕向下移动
                    i--
                    if (i < 0) {
                        i = 0
                        return
                    }
                }
                $('#box div').css('transform', 'translateY(-' + (i * 100) + 'vh)')
                date = new Date()
            }
        }
    </script>
</body>

</html>